<template>
  <div class="app">
    <div>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :value="false">展开</el-radio-button>
        <el-radio-button :value="true">隐藏</el-radio-button>
      </el-radio-group>
      <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
        @close="handleClose">
        <!-- <el-sub-menu v-for="item in directoryList" :key="item.directoryId" :index="item.directoryId">
          <template #title>
            <el-icon><icon-menu /></el-icon>
            <span>{{ item.directoryName }}</span>
          </template>
<el-sub-menu v-for="children in item.children" :key="children.directoryId"
  :index="item.directoryId + '-' + children.directoryId">
  <template #title>
              <span style="margin-left: 10px;">{{ children.directoryName }}</span>
            </template>
  <el-menu-item v-for="lastChildren in children.children" :key="lastChildren.directoryId"
    :index="lastChildren.directoryId" @click="clickMenuItem($event)">
    <span style="margin-left: 10px;">{{ lastChildren.directoryName }}</span>
  </el-menu-item>
</el-sub-menu>
</el-sub-menu> -->
        <treeSelectComponent v-for="item in directoryList" :key="item.directoryId" :index="item.directoryId"
          :tree="item" @clickMenuItem="clickMenuItem">
        </treeSelectComponent>
      </el-menu>
    </div>
    <div class=" head-menu">
      <el-button @click="logout">退出登录</el-button>
    </div>
    <div class="display-zone content" v-if="showContent">
      <PointSubmission v-model:itemList="itemList" v-model:currentMenu="currentMenu" />
    </div>
  </div>
</template>

<script setup>
import { listDirectory, getDirectory, delDirectory, addDirectory, updateDirectory } from "@/api/complex/directory";
import { listItem, getItem, delItem, addItem, updateItem } from "@/api/complex/item";
import { onMounted, ref } from 'vue'
import useUserStore from '@/store/modules/user'
import PointSubmission from './PointSubmission.vue';
import { ElMessageBox } from 'element-plus'
import router from '@/router'
import treeSelectComponent from "../component/tree-select-component.vue"


const userStore = useUserStore()
const directoryList = ref(null);
const itemList = ref([]);
const currentMenu = ref();

const showContent = ref(false)
const isCollapse = ref(false)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

function clickMenuItem(event) {
  console.log(event);
  listItem({ directoryId: event.directoryId, pageSize: 1000 }).then(res => {
    console.log(currentMenu.value);
    currentMenu.value = event;
    itemList.value = res.rows;
    showContent.value = true;
  })
}

const { proxy } = getCurrentInstance();

/** 查询综测目录列表 */
function getList() {
  listDirectory().then(response => {
    directoryList.value = proxy.handleTree(response.data, "directoryId", "parentId");
    console.log(directoryList.value)
  });
}
onMounted(() => {
  getList();
})

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = router.resolve('/index').href;
    })
  }).catch(() => { });
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 280px;
  min-height: 400px;
}

.app {
  display: flex;
}

a {
  text-decoration: none;
}

.display-zone {
  flex: 1;
  overflow: auto;
}
</style>
